<template>
  <div class="goods_detail">
    <el-form
      ref="routeForm"
      :model="routeForm"
      class="mt20"
      label-width="80px"
      @submit.native.prevent
    
      >
      <el-row >
        <el-col :span="4">
          <el-card  shadow="always">
            <el-tabs tab-position="left"  v-model="currentDay" >
              <el-tab-pane
              v-for="(item) in parseInt(days)"
              :key="item"
              :name="item.toString()"
              :label="'D'+item"
              >
              <span slot="label"><i class="el-icon-date"></i> {{'D'+item}}</span>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col> 
        <el-col :span="12">
          <div   class="display-flex-column mb-20" v-show="(index + 1 ) == currentDay" v-for="(item,index) in routeForm.productRouteDay"  :key="index">  
            <div class="day-title">
              <span>D{{index +1}}</span>
            </div>
            <div class="daily_itinerary_con daily_itinerary_item">
              <div class="daily_itinerary_sub_item daily_itinerary_sub_item js_scheduleSubItemGraphic daily_itinerary_sub_item_first">
                <div class="daily_itinerary_sub_info">
                  <el-form-item label="行程标题：" :prop="'productRouteDay.' + index + '.title'"   :rules="{ required: true, message: '请选择标题', trigger: 'blur' }" >
                    <el-input
                      v-model="routeForm.productRouteDay[index].title"
                      type="textarea"
                      :rows="2" 
                      maxlength="300"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入标题，最多不超过300字，示例：贵阳-黄果树"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="行程描述："  >
                    <el-input
                      v-model="routeForm.productRouteDay[index].trip_desc"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入行程描述，最多不超过1000字"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
              </div>  
            </div>
            <div class="daily_itinerary_con daily_itinerary_item" v-for="(xm,indexm) in item.productRouteDetail" :key="indexm">
              <div class="daily_itinerary_sub_item daily_itinerary_sub_item js_scheduleSubItemGraphic daily_itinerary_sub_item_first">
                <div class="daily_itinerary_sub_time display-flex">

                <el-popconfirm
                  confirm-button-text='确认删除'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除行程节点？"
                  @confirm="item.productRouteDetail.splice(indexm,1)"
                >
                  <div slot="reference" class="display-flex">
                    <img :src="filterTypeImage(xm.type)" class="w-20">
                  <span class="ft-w700 text-14" style=" position: absolute; left: 25px;">{{filterType(xm.type)}}</span>
                  </div>
                </el-popconfirm>
              </div>
                <!-- 集合 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==1">
                  <el-form-item label="标题:"   >
                      <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:"   >
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item> 
                  <el-form-item label="集合地点:">
                    <div  style="display: flex;">
                      <el-input v-model="xm.address" placeholder="请输入" size="medium"   style="width: 200px;"></el-input> 
                      <div style="margin-left: 5px;">
                        <el-input
                          v-model="xm.lng_lat"
                          placeholder="地点经纬度"
                          size="small"
                          class="pageWidth"
                          disabled
                          style="width: 150px;"
                        />
                        <el-button
                          type="primary"
                          class="uploadVideo"
                          size="mini"
                          @click="selectLngLat(xm)"
                        >
                          选择经纬度
                        </el-button>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  
                </div>
                <!-- 结束行程 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==2">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                 </el-form-item> 
                  <el-form-item label="时间:">
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div> 

                <!-- 餐饮 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==3">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:">
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <!-- <el-form-item label="餐饮类型:" >
                    <el-radio-group v-model="xm.dinner">
                      <el-radio label="早餐"></el-radio>
                      <el-radio label="午餐"></el-radio>
                      <el-radio label="晚餐"></el-radio>
                      <el-radio label="下午茶"></el-radio>
                      <el-radio label="夜宵"></el-radio>
                    </el-radio-group>
                  </el-form-item> -->
                  <el-form-item label="用餐时长:" >
                    <div class="display-flex">
                      <el-input v-model="xm.take_time_hour" placeholder="请输入" size="medium" type="number" maxlength="10" ></el-input> 
                      <span class="ml-10 mr-10">时</span>
                      <el-input v-model="xm.take_time_min" placeholder="请输入" size="medium"  maxlength="60"  type="number" ></el-input>
                      <span  class="ml-10 mr-10">分</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="用餐地址:" >
                    <div  style="display: flex;">
                      <el-input v-model="xm.address" placeholder="请输入" size="medium"   style="width: 200px;"></el-input> 
                      <div style="margin-left: 5px;">
                        <el-input
                          v-model="xm.lng_lat"
                          placeholder="地点经纬度"
                          size="small"
                          class="pageWidth"
                          disabled
                          style="width: 150px;"
                        />
                        <el-button
                          type="primary"
                          class="uploadVideo"
                          size="mini"
                          @click="selectLngLat(xm)"
                        >
                          选择经纬度
                        </el-button>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 酒店 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==4">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:">
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <el-form-item label="酒店名称:"  :prop="'productRouteDay.' + index + '.productRouteDetail.'+indexm+'.hotel'"  >
                    <el-input v-model="xm.hotel" placeholder="请输入" size="medium"  maxlength="500" ></el-input> 
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 航班 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==5">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:">
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <!-- <el-form-item label="是否直飞:">
                    <el-radio-group v-model="xm.airplan">
                      <el-radio label="待定"></el-radio>
                      <el-radio label="直飞"></el-radio>
                      <el-radio label="中转"></el-radio>
                    </el-radio-group>
                  </el-form-item> -->

                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 景点 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==6">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:">
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <el-form-item label="景点名称:"  >
                    <div
                        v-for="(scenic, indexs) in xm.scenics"  :key="indexs"
                        class="display-flex mb-20"
                      >
                      <el-form-item >
                        <!-- <el-input v-model="scenic.name" style="width: 200px;"></el-input> -->
                        <el-autocomplete
                          v-model="scenic.name"
                          prefix-icon="el-icon-search"
                          :fetch-suggestions="querySearch"
                          placeholder="请输入景点"
                          class="duanWidth"
                        >
                          <template slot-scope="{ item }">
                            <div class="name" @click="selectScenic(xm.scenics,indexs,item)">
                              {{ item.name }}
                            </div>
                          </template>
                        </el-autocomplete>
                      </el-form-item>
                      <el-button class="ml-10" type="danger" size="mini"  @click.prevent="xm.scenics.splice(indexs, 1);" >删除</el-button>
                    </div>
                    <el-button class="" type="primary" size="mini" @click.prevent="addScenic(xm.scenics, index, indexm)">新增</el-button>
                  </el-form-item>
                  
                  <el-form-item label="游玩时长:" >
                    <div class="display-flex">
                      <el-input v-model="xm.take_time_hour" placeholder="请输入" size="medium" type="number" maxlength="10" ></el-input> 
                      <span class="ml-10 mr-10">时</span>
                      <el-input v-model="xm.take_time_min" placeholder="请输入" size="medium"  maxlength="60"  type="number" ></el-input>
                      <span  class="ml-10 mr-10">分</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 自费 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==7">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:" >
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <el-form-item label="时长:" >
                    <div class="display-flex">
                      <el-input v-model="xm.take_time_hour" placeholder="请输入" size="medium" type="number" maxlength="10" ></el-input> 
                      <span class="ml-10 mr-10">时</span>
                      <el-input v-model="xm.take_time_min" placeholder="请输入" size="medium"  maxlength="60"  type="number" ></el-input>
                      <span  class="ml-10 mr-10">分</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 自由活动 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==8">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:" >
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <el-form-item label="活动时长:" >
                    <div class="display-flex">
                      <el-input v-model="xm.take_time_hour" placeholder="请输入" size="medium" type="number" maxlength="10" ></el-input> 
                      <span class="ml-10 mr-10">时</span>
                      <el-input v-model="xm.take_time_min" placeholder="请输入" size="medium"  maxlength="60"  type="number" ></el-input>
                      <span  class="ml-10 mr-10">分</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 交通 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==9">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:">
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>
                  <el-form-item label="交通时长:" >
                    <div class="display-flex">
                      <el-input v-model="xm.take_time_hour" placeholder="请输入" size="medium" type="number" maxlength="10" ></el-input> 
                      <span class="ml-10 mr-10">时</span>
                      <el-input v-model="xm.take_time_min" placeholder="请输入" size="medium"  maxlength="60"  type="number" ></el-input>
                      <span  class="ml-10 mr-10">分</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
                <!-- 其他 -->
                <div class="daily_itinerary_sub_info" v-if="xm.type==10">
                  <el-form-item label="标题:"   >
                    <el-input v-model="xm.title" placeholder="请输入标题" size="medium"   ></el-input> 
                  </el-form-item> 
                  <el-form-item label="时间:" >
                    <el-input v-model="xm.happen_time" placeholder="请输入" size="medium"   style="width: 100px;"></el-input> 
                  </el-form-item>  
                  <el-form-item label="补充说明：">
                    <el-input
                      v-model="xm.content"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                  <el-form-item label="温馨提示：">
                    <el-input
                      v-model="xm.reminder"
                      type="textarea"
                      :rows="5" 
                      maxlength="1000"
                      minilength="5"
                      show-word-limit	
                      placeholder="请输入"
                      class="pageWidth"
                      size="small"
                      style="margin-top: 5px"
                    />
                  </el-form-item>
                </div>
              </div>  
            </div>
            <div class="daily_itinerary_con daily_itinerary_item">
              <div class="daily_itinerary_sub_item daily_itinerary_sub_item js_scheduleSubItemGraphic daily_itinerary_sub_item_first">
                <div class="daily_itinerary_sub_time" style="left: -80px;">
                <routeBox :day="index+1" @selectType="selectType"></routeBox>
                </div>
              </div>  
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="8" >
          <div class="ifam" style="margin-top: 50px;margin-left:150px">
            <div class="content" v-html="1111111111111"></div>
          </div>
        </el-col> -->
        <el-col :span="8" >
          <div style="margin-top: 50px;margin-left:150px" v-if="routeForm.productRouteDay.length">
            <div ref="targetElement"  class="">
              <div style="font-size: 32rpx;font-weight: 700;color: #282828;height: 86rpx;width: 100%;text-align: left;line-height: 86rpx;display: inline-block;white-space: pre-line;">{{routeForm.productRouteDay.length}}日行程</div>
              <div  v-for="(days,indexDay) in routeForm.productRouteDay" :key="indexDay" style="display: flex;flex-direction: column;background-color: #f8fafd;margin-bottom: 5px;padding: 10px 0 10px 10px;border-radius: 5px;">
                <div style="background-color: #f8fafd;text-align: start;margin-right: 5px;margin-bottom: 5px;line-height: 1.6;display: inline-block;white-space: pre-line">
                  <span style="font-size: 14px;font-weight: 700;color: #000;margin-right: 4px;">D{{indexDay+1}}</span>
                  <span style="color: #dde4ed;margin-right: 4px;">|</span>
                  <span style="font-size: 14px;font-weight: 700;color: #000;">{{days.title}}</span>
                </div>
                <div  v-if="days.trip_desc && days.trip_desc !=null">
                  <div style="display: inline-block;white-space: pre-line;text-align: justify;text-justify: newspaper;word-break: break-all;line-height: 1.6;margin-bottom: 15px;margin-top: 10px;font-size: 12px;color: #3e3e3e;">
                    {{days.trip_desc?days.trip_desc:''}}
                  </div>
                </div>
                
                <div  style="position: relative;padding-bottom: 10px;margin-left: 30px;margin-top: 10px;">
                  <div  v-for="(day,indexd) in days.productRouteDetail" :index="indexd" style="position: relative;padding-bottom: 10px;padding-right: 10px;">
                    <div style="position: relative;margin-bottom: 10px;">
                      <div style="position: absolute;left: -36px;top: 0;background: #f8fafd;margin: 0 6px;z-index: 3;align-items: center;justify-content: center;">
                        <div style="width: 20px;height: 20px;position: relative;left: 1px;">
                          <img style="width: 20px;height: 20px" :src="'https://qiniu.gzyxly.cn/tour/xc_type'+day.type+'.png'"></img>
                        </div>
                      </div>
                      <div  style="display: flex;">
                        <span v-if="day.happen_time&&day.happen_time!=null &&day.happen_time!='0:00'" style="font-size: 14px;font-weight: 700;color: #000;">
                          {{day.happen_time}}
                          <span  style="font-size: 14px;font-weight: 700;color: #000;"> · </span>
                        </span>
                        
                        <span  style="font-size: 14px;font-weight: 700;color: #000;">
                        {{day.title && day.title !=null?day.title : filterType(day.type, day)}}
                        </span>
                      </div>
                      
                    </div>
                    <div class="">
                      <div v-if="day.hotel&& day.hotel !=null" style="color: #3e3e3e;font-size: 12px;margin-bottom: 10px;">
                        入住酒店：{{day.hotel}}
                      </div>
                      <div v-if="day.address" style="color: #3e3e3e;font-size: 12px;margin-bottom: 10px;">
                        {{filterAddressType(day.type,day)}}
                      </div>
                      <!--   -->
                      <span v-if="day.content && day.content !=null" style="display: inline-block;white-space: pre-line;color: #3e3e3e;font-size: 12px;margin-bottom: 10px;line-height: 1.6;text-align: justify;text-justify: newspaper;word-break: break-all;" >
                        {{day.content}}
                      </span>
                      <div v-if="day.take_time_hour||day.take_time_min" style="color: #3e3e3e;font-size: 12px;margin-top: 10px;display: flex;align-items: center;" >
                        <div style="width:16px;height:16px"><img style="margin-right: 5px;width:16px;height:16px" src="https://qiniu.gzyxly.cn/ic_clock2.png"/></div>
                        <span>{{filterTimeType(day.type,day)}}</span>
                      </div>
                      <div v-if="day.reminder && day.reminder!=null" style="color: #3e3e3e;font-size: 12px;margin-top: 10px;display: flex;">
                        <div  style="width:16px;height:16px"><img style="margin-right: 5px;width:16px;height:16px" src="https://qiniu.gzyxly.cn/wenxintishi.png"/></div>
                        <span  style="text-align: justify;text-justify: newspaper;word-break: break-all;display: inline-block;white-space: pre-line">{{day.reminder}}</span>
                      </div>
                    </div>
                    <div style="position: absolute;border-left: 1px dashed #999;left: -20px;top: 0;bottom: 0;-webkit-transform: scaleX(.5);transform: scaleX(.5);">
                      
                    </div>
                  </div>
                </div>
                <!-- <div v-if="!days.show" @click="showRouteDay(indexDay)" class="route-detail-hide">
                  <span>展开</span>
                  <span  class="iconfont icon-ic_down" ></span>
                </div>
                <div v-if="days.show" @click="hideRouteDay(indexDay)"  class="route-detail-hide">
                  <span>收起</span>
                  <span class="iconfont icon-ic_up"></span>
                </div> -->
              </div>
            
            </div>
          </div>
        </el-col>
      </el-row>
      <el-form-item style="margin-top:30px;" class="fix-rb">
        <el-button
          type="primary"
          class="submission"
          size="small"
          @click="handleSubmitUp"
        >上一步
        </el-button>
        <el-button
          type="primary"
          class="submission"
          size="small"
          @click="submitSave()"
        >保存
        </el-button>
        <el-button
          type="primary"
          class="submission"
          size="small"
          @click="handleSubmitNest()"
        >下一步
        </el-button>

        <el-button
          :data-clipboard-text="routeHtml"
          type="primary"
          class="submission copy-data"
          size="small"
          @click="routeCopy()"
        >复制行程
        </el-button>
        
      </el-form-item>
    </el-form>
    <choseLoc  @getLngLat="getLngLat" ref="locRef"></choseLoc>
  </div>
</template>
<script>
import routeBox from "@/components/routeBox/index.vue";
import { cityAreaV2, getScenicV2Api } from '@/api/system';
import choseLoc from '@/components/choseLoc'
import COS from "cos-js-sdk-v5";
import ClipboardJS from "clipboard";
import { set } from "nprogress";

// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
export default {
  name: 'routeCard',
  props: {
    days: {
      type: String | Number,
      default: 0
    },
    tempObject: {
      type: Object,
      default: {}
    }
  },
  components: {routeBox,choseLoc},
  data() {
    return {
     routeForm: {
        productRouteDay:[
        ],
      },
      currentDay: "1",
      routeHtml: '',
    }
  },
  created(){
    this.routeForm = this.tempObject;
  },
  mounted() {

  },
  methods: {
     // 搜索
     querySearch(query, callback) {
      getScenicV2Api({ name: query })
        .then(res => {
          callback(res.data)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },

    selectScenic(scenics, index,item){
      scenics[index] = item;
      console.log('scenics',scenics)
    },
    handleSubmitUp(){
      this.$emit("handleSubmitUp")
    },
    handleSubmitNest(){
      if(this.checkRouteForm()) return;
      this.$emit("handleSubmitNest")
    },
    submitSave(){
      if(this.checkRouteForm()) return;
      this.$refs["routeForm"].validate(valid => {
        if (valid) {
     
          this.$emit("saveRoute",this.routeForm)
        } else {
          return this.$message.error("行程信息-参数校验未通过");
        }
      });

      
    },


    selectLngLat(data){
      var that = this;
      console.log(data)
      console.log(123,that.$refs.locRef)
      this.$refs.locRef.open();
      setTimeout(() => {
        that.$refs.locRef.initMap()
        that.$refs.locRef.getSourceData(data);
      },200)
    },
    getLngLat(e,sourceData){
      console.log(11,e)
      // this.formValidate.gcj_lng_lat = e;
      if(sourceData){
        sourceData.lng_lat = e
      }
      console.log('sourceData',sourceData)
    },
    filterType(type, day){
				// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
				switch (type) {
					case 1:
						return "集合";
					case 2:
						return "结束行程";
					case 3:
						return day.dinner? day.dinner: "餐饮";
					case 4:
						return "酒店";
					case 5:
						return day.airplan ?day.airplan: "航班";
					case 6:
						return "景点";
					case 7:
						return "自费";
					case 8:
						return "自由活动";
					case 9:
						return "交通";
					case 10:
						return "其他";		
				}
				
			},
			filterTimeType(type, day){
				// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
				switch (type) {
					case 1:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 2:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 3:
						return "用餐时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 4:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 5:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 6:
						return "游玩时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 7:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 8:
						return "活动时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 9:
						return "交通时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 10:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
				}
				
			},
			filterAddressType(type, day){
				// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
				switch (type) {
					case 1:
						return "集合地点："+day.address;
					case 2:
						return "地点："+day.address;
					case 3:
						return "用餐地址："+day.address;
					case 4:
						return "地点："+day.address;
					case 5:
						return "地点："+day.address;
					case 6:
						return "地点："+day.address;
					case 7:
						return "地点："+day.address;
					case 8:
						return "地点："+day.address;
					case 9:
						return "地点："+day.address;
					case 10:
						return "地点："+day.address;
				}
				
			},
			
    routeCopy(){
      console.log("this.routeForm",this.routeForm)
      if (this.$refs.targetElement) {
     
        this.$nextTick(() => {
          const element = this.$refs.targetElement
          if (element) {
            this.routeHtml = element.outerHTML;
            const clipboard = new ClipboardJS('.copy-data');
            clipboard.on("success", () => {
                this.$message.success('复制成功');
            });
          }

       
      
        console.log('element',this.$refs.targetElement.innerHTML); // 输出 DOM 元素
      });
      }
    },
    checkRouteForm(){
      console.log("this.routeForm",this.routeForm)
      if(this.routeForm.productRouteDay.length <=0){
          this.$message.warning("基本信息-请先添加行程天数");
          return
       }
       var flag = false;
       for(var i= 0;i < this.routeForm.productRouteDay.length; i++){
        if(!this.routeForm.productRouteDay[i].title){
           this.$message.error("第"+(i + 1)+"天的标题为空，请填写！");
           flag = true;
           break;
        }
        // if(this.routeForm.productRouteDay[i].productRouteDetail.length <= 0){
        //    this.$message.error("第"+(i + 1)+"天的行程节点至少添加一个！");
        //    flag = true;
        //    break;
        // }

        for( var j = 0; j< this.routeForm.productRouteDay[i].productRouteDetail.length; j++){
          if(this.routeForm.productRouteDay[i].productRouteDetail[j].type == 6){
            if( this.routeForm.productRouteDay[i].productRouteDetail[j].scenics==null || this.routeForm.productRouteDay[i].productRouteDetail[j].scenics.length==0){
            this.$message.error("第"+(i + 1)+"天的行程节点里面的景点必须添加！");
            flag = true;
            break;
            }
          }
          
        }
        
       }
       return flag;
    },
    selectType(e){
      if(this.routeForm.productRouteDay[e.day -1].productRouteDetail.length >=16){
        return this.$message.error("最多添加15个时间节点")
      }
      this.routeForm.productRouteDay[e.day -1].productRouteDetail.push({
          type: e.type,
          happen_time: '',
          content: '',
          take_time_hour: '',
          take_time_min: '',
          dinner: '',
          hotel: '',
          scenic_ids: '',
          scenic_names: '',
          address: '',
          lng_lat:'',
          airplan: '',
          scenics: [],
        })

    },
    addScenic(item, index, indexm){
  
      if(item == null || item == ''){
        this.routeForm.productRouteDay[index].productRouteDetail[indexm].scenics = [];
        this.routeForm.productRouteDay[index].productRouteDetail[indexm].scenics.push({
          id: '',
          name: '',
          slider_image: ''
        })
      } else {
        item.push({
        id: '',
        name: '',
        slider_image: ''
      })
      }
      // console.log(123,item)
     
    },
    deleteScenic(item){
      item.push({
        value: ''
      })
    },
    // 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
    filterType(e){
      switch (e) {
          case 1:           
              return "集合";
          case 2:
              return "结束行程";
          case 3:           
              return "餐饮";
          case 4:
              return "酒店";
          case 5:
              return "航班";
          case 6:
              return "景点";
          case 7:
              return "自费";    
          case 8:
              return "自由活动";   
          case 9:
              return "交通";    
          case 10:
              return "其他";         
      }
    },
    filterTypeImage(e){
      switch (e) {
          case 1:           
              return require("../../assets/images/jihe.png");
          case 2:
              return require("../../assets/images/jieshu.png");
          case 3:           
              return require("../../assets/images/canying.png");
          case 4:
              return require("../../assets/images/jiudian.png");
          case 5:
              return require("../../assets/images/hb.png");
          case 6:
              return require("../../assets/images/jd.png");
          case 7:
              return require("../..//assets/images/gw.png");    
          case 8:
              return require("../../assets/images/zyhd.png");   
          case 9:
              return require("../../assets/images/jt.png");    
          case 10:
              return require("../../assets/images/qt.png");         
      }
    },

  }
}
</script>

<style scoped lang="scss">
.day-title{
  width: 100px;
  padding: 5px 10px;
  background: linear-gradient(90deg, #b0d5f3 0%, #fff 100%, #fff 100%);
  border-radius: 5px;
  color: #000;
  font-weight: 700;
  font-size: 16px;
}

.daily_itinerary_con {
  padding: 10px 0 0 74px
}

.daily_itinerary_sub_item {
  position: relative;
  padding-bottom: 0;
}
.daily_itinerary_item .daily_itinerary_sub_item::after,.daily_itinerary_item .daily_itinerary_sub_item::before {
  border-left: 1px dashed #ccc;
  height: 50%;
  z-index: 0;
  position: absolute;
  left: -66px;
  display: block;
  width: 1px;
  content: ""
}
.daily_itinerary_item .daily_itinerary_sub_item::before {
  top: 0;
}
.daily_itinerary_item .daily_itinerary_sub_item::after {
  bottom: 0;
}
.daily_itinerary_sub_time {
  width: 100px;
  //min-height: 40px;
  z-index: 1;
  background: #fff;
  position: absolute;
  left: -76px;
  top: 0;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  //flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  //justify-content: center;
  font-size: 14px
}
.daily_itinerary_sub_info {
  padding-bottom: 24px;
  min-height: 52px;
  font-size: 14px;
  margin-left: 30px;
}

.ifam {
  width: 344px;
  height: 644px;
  background: url('../../assets/images/phonebg.png') no-repeat center top;
  background-size: 344px 644px;
  padding: 40px 20px;
  padding-top: 50px;
  margin: 0 auto 0 20px;

  .content {
    height: 560px;
    overflow: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }

  .content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.fix-rb{
  position: fixed;
  right:120px;
  bottom: 80px;
}
</style>
